<template>
 <div>
   <el-menu
     :default-active="defaultActive"
     class="el-menu-vertical-demo"
     @open="handleOpen"
     @close="handleClose"
   >
     <el-sub-menu index="1">
       <template #title>
         <el-icon>
           <location/>
         </el-icon>
         <span>综合查询</span>
       </template>
       <el-menu-item index="1-1">位置监控</el-menu-item>
       <el-menu-item index="1-2">轨迹查询</el-menu-item>
       <!--              <el-menu-item-group title="Group Two">-->
       <!--                <el-menu-item index="1-3">111</el-menu-item>-->
       <!--              </el-menu-item-group>-->
       <!--              <el-sub-menu index="1-4">-->
       <!--                <template #title>企业管理</template>-->
       <!--              </el-sub-menu>-->
     </el-sub-menu>
     <el-menu-item index="2">
       <el-icon>
         <icon-menu/>
       </el-icon>
       <span>企业管理</span>
     </el-menu-item>
   </el-menu>
 </div>
</template>

<script>
import {reactive, toRefs, onMounted} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {useStore} from 'vuex'

export default {
  name: "nemu",
  setup() {
    const Route = useRoute()
    const Router = useRouter()
    const store = useStore()
    const state = reactive({
      defaultActive: "1"
    })

    const handleOpen = (key, keyPath) => {
      console.log(key, keyPath)
    }
    const handleClose = (key, keyPath) => {
      console.log(key, keyPath)
    }


    onMounted(() => {


    })

    return {
      ...toRefs(state),
      handleOpen,
      handleClose
    }
  },
}
</script>

<style lang='less' scoped>

</style>
